import { TabBar } from 'antd-mobile'
import { useHistory, useLocation } from 'react-router-dom'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  FileOutline,
  UserOutline,
  AddOutline
} from 'antd-mobile-icons'

const Bottom = () => {
  const history = useHistory()
  const location = useLocation()
  const { pathname } = location

  const setRouteActive = (value) => {
    history.push(value)
  }

  const tabs = [
    {
      key: '/',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/table',
      title: '图表',
      icon: <FileOutline />,
    },
    {
      key: '/publish',
      title: '发布',
      icon: <AddOutline />,
    },
    {
      key: '/message',
      title: '消息',
      icon: <MessageOutline />,
    },
    {
      key: '/me',
      title: '个人中心',
      icon: <UserOutline />,
    },
  ]

  return (
    <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
      {
        tabs.map(item => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))
      }
    </TabBar>
  )
}

export default Bottom;